<h2 class="text-center">MongoDB {{__ "Connections"}}</h2>
{{#if message}}<h3 class="text-danger">{{__ "Connection"}}: {{conn}} - {{message}}</h3>{{/if}}
<div class="col-lg-12">
    <div class="col-lg-12">
        <table class="table table-responsive">
            {{#each connection_list}}
            <thead>
                <tr>
                    <th class="col-md-2 text-center">{{__ "Connection name"}}</th>
                    <th class="col-md-4 text-center">{{__ "Connection string"}}</th>
                    <th class="col-md-3 text-center">{{__ "Connection options"}}</th>
                    <th class="col-md-4 text-center">{{__ "Action"}}</th>
                </tr>
            </thead>
                <tr class="connectionRow">
                    <td><input type="text" class="form-control input-sm conf_conn_name" value="{{@key}}"></td>
                    <td><input type="text" class="form-control input-sm conf_conn_string" value="{{this.connection_string}}"></td>
                    <td><pre class="code-block conectionOptions"><code class="json">{{{toJSON this.connection_options}}}</code></pre></td>
                    <td class="text-center conn_id" id="{{@key}}">
                        <div class="btn-group" role="group" aria-label="ConnButtons">
                            <button class="btn btn-danger btn-sm pull-left btnConnDelete">{{__ "Delete"}}</button>
                            <button class="btn btn-primary btn-sm btnConnConnect" id="{{@index}}">{{__ "Connect"}}</button>
                            <button class="btn btn-success btn-sm pull-right btnConnUpdate">{{__ "Update"}}</button>
                        </div>
                    </td>
                </tr>
            {{else}}
                <h3 class="text-center text-warning">No connections. Please add one below</h3>
            {{/each}}
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td class="text-center"><strong>{{__ "Connection name"}}</strong></td>
                <td class="text-center"><strong>{{__ "Connection string"}}</strong></td>
                <td class="text-center"><strong>{{__ "Connection options"}}</strong> (See <a href="https://mongodb.github.io/node-mongodb-native/2.1/reference/connecting/connection-settings/" target="_blank">docs</a>)</td>
                <th class="text-center"><strong>{{__ "Action"}}</strong></th>
            </tr>
            <tr class="connectionRow">
                <td>
                    <input type="text" class="form-control input-sm" id="new_conf_conn_name" name="new_conf_conn_name" placeholder="{{__ "A name for connection"}}">
                </td>
                <td>
                    <input type="text" class="form-control input-sm" id="new_conf_conn_string" name="new_conf_conn_string" placeholder="{{__ "Connection string"}}: mongodb://<user>:<password>@127.0.0.1:<port>/<db>">
                </td>
                <td>
                    <div class="connection_json" id="json">{}</div>
                </td>
                <td class="text-center">
                    <button class="btn btn-success btn-sm" id="add_config">{{__ "Add connection"}}</button>
                </td>
            </tr>
        </table>
    </div>
</div>